<template>
  <h3>借阅管理</h3>
  <el-divider />
  <div>
    <el-button type="primary" @click="bash_send_mail" :disabled="multipleSelection.length<=0">批量发送邮件</el-button>
  </div>
  <el-table :data="recordList.list" @selection-change="handleSelectionChange">
    <el-table-column width="100" label="序号" type="selection" :selectable="selectable"/>
    <el-table-column width="100" label="序号" type="index" />
    <el-table-column label="图书名称" prop="b_name" />
    <el-table-column label="类别" prop="c_name" />
    <!-- <el-table-column label="封面">
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="`${base_url+scope.row.b_cover}`" :fit="cover" />
      </template>
    </el-table-column> -->
    <el-table-column label="借阅人" prop="real_name" />
    <el-table-column label="开始时间" prop="start_time" />
    <el-table-column label="结束时间" prop="end_time" />
    <el-table-column label="实际归还时间" prop="real_time" />
    <el-table-column label="状态" width="180px">
      <template #default="scope">
        <el-tag class="mx-1" v-if="scope.row.r_state == 0" type="danger"
          >未归还</el-tag
        >
        <el-tag v-else class="mx-1" type="success">已归还</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="260px">
      <template #default="scope">
        <el-button type="primary" size="small">详情</el-button>
        <el-button type="warning" size="small" v-if="scope.row.r_state == 0"
          >发送催促邮件</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "../axios";

const multipleSelection = ref([]);


const params = {
  pageNum: 1,
  pageSize: 10,
};

const recordList = ref({});

onMounted(() => {
  record_list();
});

const record_list = () => {
  http
    .get("/record/list", {
      params: params.value,
    })
    .then((resp) => {
      recordList.value = resp.data.data;
    });
};

const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(multipleSelection.value);

  
};

const bash_send_mail = ()=>{
  const recordIds = [];
  multipleSelection.value.forEach(val=>{
    recordIds.push(val.record_id);
  })
  console.log(recordIds);
}

const selectable = (row,index)=>{
  //console.log(row,index);
  return row.r_state==0?true:false;
}

</script>

<style></style>
